<template>
  <div class="app-container">
    <el-row :gutter="10" style="margin-bottom: 0.3125rem;">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          :loading="loading"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      empty-text="暂无数据."
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="名称" width="200" />
      <el-table-column prop="icon" label="图标" width="50">
        <template slot-scope="scope">
          <i :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="orderNum" label="排序" width="80" />
      <el-table-column prop="perms" label="权限标识" />
      <el-table-column prop="component" label="组件路径" />
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status='0' " >正常</el-tag>
          <el-tag v-else type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | dateFormat}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="left" fixed="right" width="300">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit-outline" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button
            v-if="scope.row.type=='M'"
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="handleAddChild(scope.row)"
          >新增下级菜单</el-button>
          <el-button
            v-if="scope.row.type=='C'"
            type="text"
            icon="el-icon-edit"
            size="small"
            @click="handleAuthority(scope.row)"
          >新增下级权限</el-button>
          <el-button type="text" icon="el-icon-delete" size="small" @click="deleteRow(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑框-->
    <info-dialog
      v-if="dialogVisible"
      :handle-type="handleType"
      :dialog-visible="dialogVisible"
      :dialog-data="dialogData"
      :parent-id="parentId"
      :grand-parent-id="grandParentId"
      @closed="dialogClose"
      @refresh="refreshLoadTree"
      @refreshAll="load"
    />

  </div>
</template>
<script>
import {
  loadMenus,
  saveMenu,
  deleteMenu
} from '@/api/subsystem/menu'
import {
  isOk
} from '@/utils/request'
import InfoDialog from './components/InfoDialog.vue'

export default {
  name:'Menu',
  components: {
    InfoDialog
  },
  data() {
    return {
      queryForm: {
        keywords: undefined,
        rootId: '0'
      },
      maps: new Map(),
      tableData: [],
      loading:false,
      dialogVisible: false,
      dialogData: {},
      /* 0-新增  1-编辑  2-新增子菜单  3-添加权限点*/
      handleType: '',
      parentId: '',
      grandParentId: ''
    }
  },
  computed: {},
  created() {
    this.load()
  },
  methods: {
    load(tree, treeNode, resolve) { /* 懒加载树形列表 */
      if (tree != null) {
        this.queryForm.rootId = tree.id
        const parentId = tree.id
        this.maps.set(parentId, {
          tree,
          treeNode,
          resolve
        }) // 将当前选中节点数据存储到maps中
      }else{
        this.queryForm.rootId ='0'
      }
      loadMenus(this.queryForm).then(rsp => { /* 树形列表展开时触发*/
        if (isOk(rsp)) {
          const menus = rsp.result
          if (treeNode) {
            resolve(menus)
          } else {
            this.tableData = menus
          }
        }
      })
    },
    dialogClose: function(e) { /* 关闭弹窗 */
      this.dialogVisible = e
      this.dialogData = {}
    },
    dialogShow: function(e) { /* 打开弹窗 */
      this.dialogVisible = true
    },
    handleAdd: function() { /* 新增节点，父节点为根节点 -1 */
      this.dialogShow()
      this.handleType = 'M'
      this.parentId = '0'
      this.queryForm.rootId = '0'
    },
    handleEdit: function(row) { /* 编辑 */
      this.dialogShow()
      this.handleType = '1'
      this.parentId = row.parentId
      // this.grandParentId = row.parentId
      Object.assign(this.dialogData, row)
    },
    handleAddChild: function(row) { /* 新增子菜单 */
      this.dialogShow()
      this.handleType = 'C'
      this.parentId = row.id
      this.grandParentId = row.parentId
      // console.log(row)
    },
    handleAuthority: function(row) { /* 添加权限点 */
      this.dialogShow()
      this.handleType = 'F'
      this.parentId = row.id
      this.grandParentId = row.parentId
    },
    deleteRow: function(rows) { /* 删除行 */
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu({
          id: rows.id
        }).then(response => {
          this.$message({
            message: '删除成功',
            type: 'success',
            duration: 500
          })
          const { parentId } = rows // 取出当前删除行的父节点id
          const parentIds = '' + parentId
          if (parentIds === '0') {
            this.queryForm.rootId = '0'
            this.load()
          } else {
            this.refreshLoadTree(parentIds)
          }
        })
      })
    },
    refreshLoadTree: function(parentId, grandParentId) { /* 局部刷新列表 */
      if (this.maps.get(parentId)) {
        const { tree, treeNode, resolve } = this.maps.get(parentId) // 根据父节点id取出对应的节点数据
        this.$set(this.$refs.table.store.states.lazyTreeNodeMap, parentId, [])// 将对应节点下的数据清空，从而实现数据的重新加载
        this.load(tree, treeNode, resolve)
      } else {
        if (this.maps.get(grandParentId)) {
          const { tree, treeNode, resolve } = this.maps.get(grandParentId)
          this.$set(this.$refs.table.store.states.lazyTreeNodeMap, grandParentId, [])
          this.load(tree, treeNode, resolve)
        } else {
          this.load()
        }
      }
    }
  }
}
</script>

<style lang="scss">

</style>
